<template>
  <div class="app-main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="pointer" @click="backApplication">
        <el-breadcrumb-item>{{ translate("application") }}</el-breadcrumb-item>
      </div>
      <el-breadcrumb-item />
      <el-breadcrumb-item>{{ translate("miniFinish") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeTab" :before-leave="tabsChange" class="mt20">
      <el-tab-pane
        :label="translate('shopHome')"
        name="0"
      ><Homeb
        v-if="activeTab === '0' && meta.indexOf('HomeRenovationInfo') > -1"
        ref="homeRef"
        :config="miniConfig"
        :meta="meta"
      /></el-tab-pane>
      <el-tab-pane
        :label="translate('venueHome')"
        name="4"
      ><Home
        v-if="activeTab === '4' && meta.indexOf('HomeRenovationInfo') > -1"
        ref="homeRef"
        :config="miniConfig"
        :meta="meta"
      /></el-tab-pane>
      <el-tab-pane
        :label="translate('myPage')"
        name="1"
      ><Personal
        v-if="activeTab === '1' && meta.indexOf('MineRenovationInfo') > -1"
        ref="taskAdminRef"
        :config="miniConfig"
        :meta="meta"
      /></el-tab-pane>
      <el-tab-pane
        :label="translate('footerNav')"
        name="2"
      ><Tabbar
        v-if="activeTab === '2' && meta.indexOf('RenovationNavication') > -1"
        :config="miniConfig"
        :meta="meta"
      /></el-tab-pane>
      <el-tab-pane
        :label="translate('themeSet')"
        name="3"
      ><Theme
        v-if="activeTab === '3' && meta.indexOf('RenovationTitle') > -1"
        :config="miniConfig"
        :meta="meta"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Home from './tabs/home'
import Homeb from './tabs/homeb'
import Personal from './tabs/personal'
import Tabbar from './tabs/tabbar'
import Theme from './tabs/theme'

import { getMiniHostPath } from '@/api'
export default {
  name: 'MiniFinish',
  components: {
    Home,
    Homeb,
    Personal,
    Tabbar,
    Theme
  },
  data() {
    return {
      activeTab: '0',
      meta: [],
      miniConfig: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.initData()
  },
  mounted() {
    window.addEventListener('beforeunload', (e) => {
      const falg = this.$store.getters.miniCompareFlag
      if (falg) {
        e.preventDefault()
        e.returnValue = ''
      }
    })
  },
  methods: {
    initData() {
      getMiniHostPath({ param: {}}).then(res => {
        this.miniConfig = res.record
      })
    },
    async backApplication() {
      const falg = this.$store.getters.miniCompareFlag
      if (falg) {
        const result = await this.$confirm(this.translate('cslkjds'), this.translate('levelEnter'), {
          confirmButtonText: this.translate('qd'),
          cancelButtonText: this.translate('cancel'),
          type: 'warning'
        })
        if (result) {
          this.$router.push('/application/applicationCenter')
          this.$store.dispatch('app/resetMiniFlag')
        }
        console.log(result)
        return result
      } else {
        this.$router.push('/application/applicationCenter')
        return true
      }
    },
    async tabsChange() {
      const falg = this.$store.getters.miniCompareFlag
      if (falg) {
        const result = await this.$confirm(this.translate('cslkjds'), this.translate('levelEnter'), {
          confirmButtonText: this.translate('qd'),
          cancelButtonText: this.translate('cancel'),
          type: 'warning'
        })
        if (result) {
          this.$store.dispatch('app/resetMiniFlag')
        }
        console.log(result)
        return result
      } else {
        return true
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.app-main-container {
  height: calc(100%);
  margin-bottom: 0;
  padding-bottom: 10px;
  font-size: 14px;
}
.el-tabs {
  height: calc(100% - 20px) !important;
}
</style>
